<template>
  <el-scrollbar wrap-class="company-wrapper">
    <el-menu
      :default-active="curCompany"
      :background-color="variables.menuBg"
      :text-color="variables.menuText"
      :unique-opened="true"
      :active-text-color="variables.activeMenuText"
      :collapse-transition="false"
      mode="horizontal"
    >
      <SidebarItem
        v-for="compony in organizationList"
        :key="compony.organizationNo"
        :item="compony"
        @chooseCompany="chooseCompany"
      />
    </el-menu>
  </el-scrollbar>
</template>

<script>
// import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem";
import variables from "@/styles/variables.scss";
import { getToken } from "@/utils/auth";

export default {
  components: { SidebarItem },
  props: {
    organizationList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    variables() {
      return variables;
    },
    curCompany() {
      return getToken('organizationNo')
    }
  },
  methods: {
    chooseCompany(company) {
      console.log('chooseCompany222', company);
      this.$emit('chooseCompany', company);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-scrollbar{
  width: 100% !important;
  padding: 10px;
}
.el-menu{
  border-right: none;
}
</style>
